/* .navbar {
  @apply fixed w-full py-8 top-0 left-0 z-[999] transition-all duration-300;

  &--sticky {
    @apply bg-white py-5 shadow-md;
  }

  &__logo {
    @apply w-11 h-8 bg-contain bg-no-repeat cursor-pointer;

    &--sticky {
      @apply bg-[url(/images/black-logo.png)];
    }
    &--normal {
      @apply bg-[url(/images/white-logo.png)];
    }
  }

  &__menu-btn {
    @apply lg:hidden relative z-50 w-8 border-none cursor-pointer outline-none bg-none;

    &--sticky {
      @apply text-black;
    }
    &--normal {
      @apply text-white;
    }
  }

  &__menu-container {
    @apply left-1/2 -translate-x-1/2 lg:top-0 h-screen lg:h-auto w-full lg:w-auto max-w-[90%] lg:max-w-[1200px] bg-white lg:bg-transparent p-20 lg:p-0 transition-transform duration-300 flex flex-col lg:flex-row items-center justify-center;

    &--open {
      @apply translate-x-0;
    }
    &--closed {
      @apply translate-x-full;
    }
  }

  &__menu-item {
    @apply lg:ml-8 lg:text-base text-2xl my-4 lg:my-0 font-medium transition-colors duration-200 hover:text-primary;
  }
} */
.navbar {
    @apply fixed top-0 left-0 w-full z-[999] flex items-center justify-between px-6 lg:px-16 py-8 transition-all duration-300;
  
    &--sticky {
      @apply bg-white py-5 shadow-md;
    }
  
    &__left {
      @apply flex items-center justify-center flex-1;
    }
  
    &__logo {
      @apply w-11 h-8 bg-contain bg-no-repeat cursor-pointer mr-6;
  
      &--sticky {
        @apply bg-[url('/images/black-logo.png')];
      }
      &--normal {
        @apply bg-[url('/images/white-logo.png')];
      }
    }
  
    &__menu-container {
      @apply absolute top-0 right-0 w-1/2 lg:w-full h-screen bg-white flex flex-col items-center justify-center gap-10 transition-transform duration-300 transform lg:static lg:h-auto lg:flex-row lg:bg-transparent lg:justify-center lg:gap-8;
  
      &--open {
        @apply translate-x-0;
      }
      &--closed {
        @apply translate-x-full lg:translate-x-0;
      }
    }
  
    &__menu-item {
      @apply text-2xl lg:text-base font-medium my-4 lg:my-0 transition-colors duration-200 hover:text-primary cursor-pointer;
    }
  
    &__menu-btn {
      @apply absolute right-0 z-50 w-8 h-8 border-none cursor-pointer outline-none bg-none ml-4 lg:hidden;
  
      &--sticky {
        @apply text-black;
      }
      &--normal {
        @apply text-white;
      }
    }
  }
  